<template>
<div>
    <!--面包屑-->
    <Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
    <!--标题-->
    <Table-title :title="TableTitle"></Table-title>
    <!--表格区域-->
    <div class="table-box">
        <h1 class="Basics-title">
            <h2>基本信息</h2>
        </h1>
        <!--基本信息表格区域-->
        <div class="table-body">
            <table border bordercolor="#E8E8E8">
                <tr>
                    <td class="table-lable">姓名</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入姓名" :disabled="nameDisabled"></el-input>
                    </td>
                    <td class="table-lable">单位</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入单位名称" :disabled="nameDisabled"></el-input>
                    </td>
                    <td class="table-lable">职务</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入职务" :disabled="nameDisabled"></el-input>
                    </td>
                </tr>
                <tr>
                    <td class="table-lable">性别</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入姓名" :disabled="nameDisabled"></el-input>
                    </td>
                    <td class="table-lable">年龄</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入单位名称" :disabled="nameDisabled"></el-input>
                    </td>
                    <td class="table-lable">级别</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入职务" :disabled="nameDisabled"></el-input>
                    </td>
                </tr>
                <tr>
                    <td class="table-lable">主要错误事实</td>
                    <td class="table-input" colspan="5">
                        <el-input type="textarea" placeholder="请输入主要错误事实" v-model="ruleForm.textarea" show-word-limit></el-input>
                    </td>
                </tr>
                <tr>
                    <td class="table-lable">处理依据</td>
                    <td class="table-input" colspan="5">
                        <el-input type="textarea" placeholder="请输入处理依据" v-model="ruleForm.textarea" show-word-limit></el-input>
                    </td>
                </tr>
                <tr>
                    <td class="table-lable">查处单位</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入查处单位" :disabled="nameDisabled"></el-input>
                    </td>
                    <td class="table-lable">处理时间</td>
                    <td class="table-input">
                        <el-date-picker v-model="ruleForm.value1" type="date" placeholder="年/月/日" :disabled="nameDisabled" :clearable="false"></el-date-picker>
                    </td>
                    <td class="table-lable">处理方式</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入处理方式" :disabled="nameDisabled"></el-input>
                    </td>
                </tr>
                <tr>
                    <td class="table-lable">处理类别</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入处理类别" :disabled="nameDisabled"></el-input>
                    </td>

                    <td class="table-lable">是否移交司法机关</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入是否移交司法机关" :disabled="nameDisabled"></el-input>
                    </td>
                    <td class="table-lable">移交时间</td>
                    <td class="table-input">
                        <el-date-picker v-model="ruleForm.value1" type="date" placeholder="年/月/日" :disabled="nameDisabled" :clearable="false"></el-date-picker>
                    </td>
                </tr>
                <tr>
                    <td class="table-lable">通报情况</td>
                    <td class="table-input" colspan="5">
                        <el-input v-model="ruleForm.username" placeholder="请输入通报情况" :disabled="nameDisabled"></el-input>
                    </td>
                </tr>
                <tr>
                    <td class="table-lable">审判人</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入审判人" :disabled="nameDisabled"></el-input>
                    </td>
                    <td class="table-lable">年龄</td>
                    <td class="table-input" colspan="3">
                        <el-input v-model="ruleForm.username" placeholder="请输入审判人" :disabled="nameDisabled"></el-input>
                    </td>
                </tr>
                <tr>
                    <td class="table-lable">备注</td>
                    <td class="table-input min-height-110" colspan="5">
                        <el-input type="textarea" placeholder="请输入备注" v-model="ruleForm.textarea" show-word-limit></el-input>
                    </td>
                </tr>
                <!--填表时间-->
                <tr>
                    <td class="table-lable">填表时间</td>
                    <td class="table-input " colspan="5">
                        <el-date-picker v-model="ruleForm.value1" type="date" placeholder="年/月/日" :disabled="nameDisabled" :clearable="false"></el-date-picker>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!--附件-->
    <Attachment-upload></Attachment-upload>
    <!--吸底按钮-->
    <Confirm-button></Confirm-button>
</div>
</template>

<script>
//  面包屑
import Breadcrumb from "@/components/IncorruptibleArchives/Breadcrumb.vue";
//  标题
import TableTitle from "@/components/IncorruptibleArchives/TableTitle.vue";
import AttachmentUpload from "@/components/IncorruptibleArchives/AttachmentUpload.vue";
import ConfirmButton from "@/components/IncorruptibleArchives/ConfirmButton.vue";
export default {
    components: {
        Breadcrumb,
        TableTitle,
        AttachmentUpload,
        ConfirmButton,
    },
    data() {
        return {
            nameDisabled: false,
            ruleForm: {
                username: "",
                value1: "",
                textarea: "",
            },
            //标题传输的文字
            TableTitle: "领导干部受组织处理和党政纪处分情况登记表",
            //面包靴跳转数据
            Breadcrumb: [{
                    name: "廉政档案",
                    link: "IncorruptibleArchives",
                },
                {
                    name: "监督对象",
                    link: "supervise",
                },
                {
                    name: "监督对象详情",
                    link: "supervisedetail",
                },
                {
                    name: "新建档案",
                    link: "",
                },
            ],
        };
    },
};
</script>

<style lang="less" scoped>
/deep/.table-box {
    padding: 20px;
    background-color: white;

    .Basics-title {
        padding: 0 0 20px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0;
        background-color: white;

        >h2 {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
            line-height: 16px;
            border-left: 4px solid #3d7fff;
            padding: 0 0 0 10px;
        }
    }

    .table-body {
        table {
            width: 100%;

            .table-lable {
                width: 9%;
                height: 46px;
                background: rgba(250, 250, 250, 1);
                font-size: 14px;
                font-weight: 600;
                color: rgba(51, 51, 51, 1);
                line-height: 21px;
                padding: 0 0 0 10px;
            }

            .table-input {
                padding: 0 10px;
            }

            .el-input {
                border-radius: 2px;

                .el-input__inner {
                    height: 36px;
                }
            }

            .el-select {
                width: 100%;
            }

            .NativePlace {
                // width: 100%;

                .el-select {
                    width: 32.8%;
                    float: left;
                    margin-right: 10px;
                }

                >.el-input {
                    width: 32.5%;
                    float: left;
                    margin-right: 10px;
                }
            }

            .NativePlace .el-input:last-child {
                margin-right: 0px;
            }

            .el-date-editor {
                width: 100%;

                .el-input__inner {
                    padding-left: 18px;
                }

                .el-input__prefix {
                    left: 91%;
                    top: -5%;
                }
            }

            /deep/.now-load {
                // width: 100%;
                // display: flex;
                .el-select {
                    width: 40.5%;
                    float: left;
                    margin-right: 10px;
                }

                >.el-input {
                    float: left;
                    width: 57%;
                }
            }

            //输入框的最小高度
            .el-textarea {
                margin: 4px 0;

                .el-textarea__inner {
                    min-height: 270px !important;
                }
            }

            .min-height-110 {

                //输入框的最小高度
                .el-textarea {
                    margin: 4px 0;

                    .el-textarea__inner {
                        min-height: 110px !important;
                    }
                }
            }
        }
    }
}
</style>
